<template>
  <!--  <h2>编辑专题</h2>-->
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24" ref="hMain">
        <div class="head-container" :style="{ height: tableHeight + 'px' }" style="overflow: auto">
          <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
            :filter-node-method="filterNode" :default-expanded-keys="expandedkeys" :current-node-key="currentNodekey"
                   ref="tree" node-key="typeId" default-expand-all highlight-current @node-click="handleNodeClick" :style="isSize">
            <template slot-scope="{ node, data }">
              <span class="span-ellipsis" :title="node.label" :style="isSize">{{ node.label }}</span>
            </template>
          </el-tree>
        </div>
      </el-col>

      <el-col :span="20" :xs="24" v-show="isShow" ref="hMain">
        <div v-show="isShowContent">
          <el-card class="box-card" style="height: 800px">
          <div slot="header" class="clearfix">
            <span :style="isSize">{{ title }}</span>
            <span style="margin-left: 5%" :style="isSize">作者：{{ userName }}</span>
            <span style="margin-left: 5%; " :style="isSize">当前状态：</span> <span :style="isSize" style="color: #C03639;">{{ state }}</span>
            <el-button style="margin-left: 10%;" plain type="success" v-show="isShowEdit" @click="edit">编辑</el-button>
            <el-button style="margin-left: 10%;" plain type="success" v-show="isShowSubmit"
              @click="submitUnified">提交至统稿</el-button>
          </div>
          <div>
            <el-button plain type="primary" v-show="isShowEditResults" @click="handleEdit">编辑结果</el-button>
            <el-button plain type="primary" v-show="isShowUnifiedDraftResults" @click="handleUnified">统稿结果</el-button>
            <div v-show="isShowEditor" style="margin-top: 1%; overflow-y: auto; max-height: 630px;">
              <editor v-model="keyword" :min-height="630" style="width: 100%" :style="isSize" :readOnly="true" />
            </div>
          </div>
        </el-card>
        </div>
        <div v-show="!isShowContent" class="empty">
          <el-empty :image-size="200" description="无权限查看"></el-empty>
        </div>
      </el-col>

      <el-col :span="20" :xs="24" v-show="!isShow" class="empty">
        <el-empty :image-size="200"></el-empty>
      </el-col>
    </el-row>

    <editDetail :detail="detail" @editCancel="editCancel" ref="editThemeRef" :isParams="1"></editDetail>
  </div>
</template>

<script>
import estimateTableHeight from "@/mixins/estimateTableHeight";
import { getTree, updateCode } from "@/api/archive/bianyan/createTopicLibrary";
import editDetail from "@/views/archive/bianyan/editTheme/editDetail";
import { getDetail, saveMaterial } from "@/api/archive/bianyan/editTheme";

export default {
  name: "index",
  mixins: [estimateTableHeight], // 混入方法
  components: { editDetail },
  data() {
    return {
      deptOptions: undefined,
      //默认展开的树节点
      expandedkeys: [],
      //默认选中的树节点
      currentNodekey: "",
      defaultProps: {
        children: "children",
        label: "typeName"
      },

      isShow: false, //是否显示右侧数据
      isShowContent: false,
      // 节点标题
      title: '',
      // 作者
      userName: '',
      // 当前状态
      state: '',
      // 树节点
      typeId: '',

      // 编辑按钮
      isShowEdit: false,
      // 提交至统稿按钮
      isShowSubmit: false,
      // 编辑结果按钮
      isShowEditResults: false,
      // 统稿结果按钮
      isShowUnifiedDraftResults: false,
      // 是否展示内容
      isShowEditor: false,
      // 编辑参数
      detail: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: '',
        // 树id
        typeId: ''
      },
      // 内容
      keyword: '',
      info: undefined
    }
  },
  computed: {

    isSize() {

      if (this.$store.getters.size == 'small') {
        this.size = 'font-size: 12px;'
      } else {
        this.size = 'font-size: 14px;'
      }
      return this.size
    }


  },
  created() {
    this.getDeptTree()
  },
  methods: {
    /** 查询部门下拉树结构 */
    getDeptTree(item) {
      if (item == undefined) {
        getTree().then(response => {
          this.deptOptions = response.data
          if (this.deptOptions.length > 0) {
            this.currentNodeKey = this.deptOptions[0].typeId;
            this.expandedkeys.push(this.deptOptions[0].typeId);
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(this.deptOptions[0].typeId)
            })
          }
        })
      } else {
        getTree().then(response => {
          this.deptOptions = response.data
          if (this.deptOptions.length > 0) {
            this.currentNodeKey = this.typeId;
            this.expandedkeys.push(this.typeId);
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(this.typeId)
            })
            const data = this.findMatchingNode(this.deptOptions, this.typeId)
            this.handleNodeClick(data)
            this.getMaterialDetail()
          }
        })
      }
    },
    findMatchingNode(tree, typeId) {
      for (const node of tree) {
        if (node.typeId === typeId) {
          return node; // 匹配到的节点
        }
        if (node.children && node.children.length > 0) {
          const match = this.findMatchingNode(node.children, typeId);
          if (match !== null) {
            return match;
          }
        }
      }
      return null; // 如果没有找到匹配的节点，返回null
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.typeName.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
     
      this.title = data.typeName
      this.userName = data.userName
      if (data.loginId == data.userId) {
        this.isShowContent = true
      } else {
        this.isShowContent = false
      }
      // 状态 0：未编辑 1：编辑中 2：编辑完成 3：统稿中 4：统稿完成
      if (data.state == '0') {
        this.state = '未编辑'
      } else if (data.state == '1') {
        this.state = '编辑中'
      } else {
        this.state = '编辑完成'
      }
      // 编辑按钮
      if (data.state == '0' || data.state == '1') {
        this.isShowEdit = true
      } else {
        this.isShowEdit = false
      }
      // 编辑内容
      this.isShowEditor = false
      // 提交至统稿按钮
      if (data.state == '1') {
        this.isShowSubmit = true
        this.isShowEditor = true
      } else {
        this.isShowSubmit = false
      }
      // 编辑结果按钮
      if (data.state == '0') {
        this.isShowEditResults = false
      } else {
        this.isShowEditResults = true
        this.isShowEditor = true
      }
      // 统稿结果按钮
      if (data.state == '4') {
        this.isShowUnifiedDraftResults = true
        this.isShowEditor = true
      } else {
        this.isShowUnifiedDraftResults = false
      }

      if (data.parentId != '0' && data.typeId != '0') {
        this.isShow = true
      } else {
        this.isShow = false
      }
      this.detail.typeId = data.typeId
      this.typeId = data.typeId
      this.info = undefined
      this.keyword = ''
      this.getMaterialDetail() // 获取编辑结果
    },

    // 获取编辑结果
    getMaterialDetail() {
      getDetail(this.typeId).then(response => {
        console.log(response,"lalla")
        if (response.data != undefined) {
          this.info = response.data
          // 默认展示编辑结果
          this.keyword = this.info.content
        }
      })
    },

    // 点击编辑结果按钮
    handleEdit() {
      this.keyword = this.info.content
    },

    // 点击统稿结果按钮
    handleUnified() {
      this.keyword = this.info.manuscript
    },

    // 编辑按钮
    edit() {
      this.detail.open = true
      this.detail.title = '撰写目录名称为:' + this.title
      this.$nextTick(() => {   //此函数执行时所有的DOM挂载和渲染都已完成
        this.$refs.editThemeRef.init(this.info);     //获取子组件中init方法并将父组件数据传递给子组件
      });
    },
    // 提交至统稿
    submitUnified() {
      this.form = {
        typeId: this.typeId,
        state: '2',
      }
      updateCode(this.form).then(response => {
        this.$modal.msgSuccess('提交至统稿成功')
        this.getDeptTree('item')
      })
    },
    editCancel() {
      this.detail.open = false
      this.getDeptTree('item')
    }
  }
}
</script>

<style lang="scss" scoped></style>
